<template>
	<view class="dingdan1">
		<view class="count">
			<!-- 功能选项 -->
			<view class="box" style="margin-bottom: 70rpx;">
				<view style="background-color: '#3687fe';" class="yuan">预约支付</view>..................
				<view class="yuan">支付订单</view>..................
				<view class="yuan">门店服务</view>
			</view>
			<!-- 厂信息 -->
			<view style="display: flex;">
				<img style="padding-top: 2%;width: 28rpx;height: 28rpx;"
					src="@/static/lyl-img/xichedingdan1/商家@3x.png" />
				<view style="margin-left: 20rpx;">
					<view style="font-size: 26rpx;">{{repairFactoryName}}</view>
					<view style="font-size: 24rpx; color: grey;">{{repairFactoryAddress}}</view>
				</view>
			</view>

			<!-- 用户信息 -->
			<view style="display: flex; margin: 10rpx 0;">
				<img style="padding-top: 1%;width: 28rpx;height: 28rpx;"
					src="@/static/lyl-img/xichedingdan1/人员@3x.png" />
				<view style="margin-left: 20rpx;font-size: 26rpx;">{{customerName}}</view>
				<view style="margin-left: 60%;font-size: 24rpx; color: grey;">{{customerPhone}}</view>
			</view>
			<!-- 车辆信息 -->
			<view style="margin-top: 20rpx;height: 60rpx;  ">
				<img style="padding-top: 2%;width: 32rpx;height: 24rpx;float: left;"
					src="@/static/lyl-img/xichedingdan1/车辆-01@3x.png" />
				<view style="font-size: 26rpx;margin-left: 20rpx; padding-top: 8rpx;float: left; ">
					{{qiche.model}}/{{qiche.licensePlate}}
				</view>
				<!-- 跳转 -->
				<img @click="navigateToCheLiang" style="height: 30rpx; width: 20rpx;float: right;  margin-top: 10rpx;"
					src="@/static/lyl-img/xichedingdan1/收起箭头小@3x.png" />
			</view>
			<view style="height: 20rpx;border-bottom: 1rpx rgba(0, 0, 0, 0.1) solid;">

			</view>
			<!-- 服务产品信息 -->
			<view>
				<view style="display: flex; margin-top:  40rpx;">
					<view>
						<h4>服务产品</h4>
					</view>
					<view style="font-size: 26rpx; margin-left: 35%;">共选择<span style="color: #3687fe;">1项</span>服务产品
					</view>
				</view>
				<view style="margin-top: 20rpx;">
					<text>{{fuwu.name}}</text>
					<text style="color: #FF8663; margin-left: 20rpx;">￥{{fuwu.price}}</text>
				</view>
			</view>
			<view style="height: 40rpx;border-bottom: 1rpx rgba(0, 0, 0, 0.1) solid;">

			</view>
			<!-- 优惠券 -->
			<view style=" margin-top: 40rpx;height: 80rpx;">
				<img style="height: 30rpx; float: left; margin-top: 10rpx;"
					src="@/static/lyl-img/xichedingdan1/优惠券@3x.png" />
				<view style="float: left;margin-left: 30rpx;">代金券/优惠券</view>
				<img style="height: 30rpx; width: 20rpx; float: right; margin-top: 10rpx;"
					src="@/static/lyl-img/xichedingdan1/收起箭头小@3x.png" />
				<view style="float: right;margin-right: 20rpx;">{{couponInfo}}</view>
			</view>
			<!-- 联系客服 -->
			<view class="dibu">
				<view></view>
				<image src="../../../static/lyl-img/zhuanyexiche1/客服@3x.png"></image>
				<text class="kefu" @click="toggle">联系客服</text>
				<view class="xiadan">立即下单</view>
				<view></view>
			</view>

			<!-- 客服弹窗 -->
			<uni-popup ref="popup" background-color="#fff">
				<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
					<view @click="call" class="text">18893029302</view>
					<view class="text">复制</view>
					<view @click="close" class="text">取消</view>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				qiche: {
					model: "",
					licensePlate: ""
				},
				fuwu: {},
				repairFactoryName: '伟业汽车维修厂子（人民路店）',
				repairFactoryAddress: '山阳区人民中路 32 号',
				customerName: '张三',
				customerPhone: '1888888888',
				vehicleInfo: '奔驰 FWE4/豫 A98FHJ',
				serviceProductCount: 3,
				serviceProducts: [{
						id: 1,
						name: '小保养套装 1',
						price: '¥199'
					},
					{
						id: 2,
						name: '小保养套装 2',
						price: '¥198'
					}
					// 添加更多服务产品对象
				],
				couponInfo: '暂无'
			};
		},
		onLoad(options) {
			if (options.fuwuData) {
				try {
					// 解码并解析为对象
					const fuwuData = JSON.parse(decodeURIComponent(options.fuwuData));
					this.fuwu = fuwuData;
				} catch (error) {
					console.error("解析 fuwuData 失败:", error);
				}
			} else {
				console.log("没有找到 fuwuData 数据");
			}
		},


		methods: {
			navigateToCheLiang() {
				uni.navigateTo({
					url: '/pages/lyl-ZhuanYeXiChe/CheLiang/CheLiang'
				});
			},
			otherFun(qiche) {
				let _this = this
				console.log(qiche);
				if (qiche) {
					_this.qiche = qiche;
				} else {
					return
				}
			},
			// 打电话
			call() {
				uni.makePhoneCall({
					phoneNumber: '18893029302',
					fail: function() {

					}
				});
			},
			// 客服对话框
			toggle(type) {
				this.$refs.popup.open('bottom')
			},
			close() {
				this.$refs.popup.close();
			}
		}
	};
</script>

<style>
	.dingdan1 {
		margin: 0;
		padding: 20rpx 30rpx;
		height: 400rpx;
		background-color: #3687fe;

	}

	.count {

		background-color: white;
		border-radius: 20rpx;
		padding: 30rpx;
		box-shadow: 0px -10px 0px 0px rgba(0, 0, 0, 0),
			/*上边阴影  透明*/
			-10px 0px 0px 0px rgba(0, 0, 0, 0),
			/*左边阴影  透明*/
			10px 0px 0px 0px rgba(0, 0, 0, 0),
			/*右边阴影  透明*/
			0px 10px 30px 0px rgba(0, 0, 0, 0.1);
		/*下边阴影 */
	}

	.box {

		margin: 40rpx 0;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.yuan {

		padding: 10rpx;
		background-color: #3687fe;
		text-align: center;
		align-items: center;
		font-size: 28rpx;
		width: 80rpx;
		height: 80rpx;
		border: black solid 1rpx;
		border-radius: 50%;
	}

	img {
		width: 45rpx;
		height: 45rpx;
	}

	/* 联系客服 */
	.dibu {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		width: 100%;
		height: 100rpx;
		background-color: white;
		box-shadow: 0px -10px 0px 0px rgba(0, 0, 0, 0),
			/*上边阴影  透明*/
			-10px 0px 0px 0px rgba(0, 0, 0, 0),
			/*左边阴影  透明*/
			10px 0px 0px 0px rgba(0, 0, 0, 0),
			/*右边阴影  透明*/
			0px 10px 30px 0px rgba(0, 0, 0, 0.1);
		/*下边阴影 */
	}

	.dibu image {
		position: fixed;
		bottom: 20rpx;
		left: 20rpx;
		height: 40rpx;
		width: 40rpx;
		float: left;
	}

	.kefu {
		position: fixed;
		bottom: 20rpx;
		left: 68rpx;
	}

	.xiadan {
		width: 240rpx;
		height: 60rpx;
		padding-top: 10rpx;
		text-align: center;
		color: white;
		background-color: #3687fe;
		position: fixed;
		bottom: 10rpx;
		right: 20rpx;
		float: right;
		border-radius: 35rpx;
	}

	/* 客服弹窗 */
	.popup-content {
		/* @include flex; */
		align-items: center;
		justify-content: center;
		padding: 15px;
		height: 130px;
		background-color: #fff;
	}

	.text {
		font-size: 35rpx;
		text-align: center;
		padding: 25rpx;
		border-bottom: 1px solid gainsboro;
	}

	.text:nth-child(3) {
		border: 0;
	}
</style>